<template>
	<view
	class="coupon-card bg-white flex-center">
		<view class="coupon-card-left clear-flex u-text-center">
			<view class="flex-center-center">
				<view class="flex-baseline font-bold color-red">
					<view class="u-f-32 u-lh-38">{{ lang_unit.money }}</view>
					<view class="u-f-66 u-lh-38">{{ item.val || item.couponVal || 0 }}</view>
				</view>
			</view>

			<view class="u-f-26 u-lh-36" style="color: #696969;">{{ lang_goods.useOver[0] }}{{ item.max || item.couponMax || 0 }}{{ lang_goods.useOver[1] }}</view>
			
			<view class="u-p-t-8 u-f-28 u-lh-40 font-medio">
				{{ typeof item.merchantId === 'number' ? lang_goods.goodsType_shopcoupon : lang_goods.goodsType_coupon }}
			</view>
		</view>
		
		<view class="flex-center-between" style="width: 100%;">
			<view class="u-p-t-10">
				<view class="u-f-32 u-lh-44 font-medio">{{ item.title || '' }}</view>
				<view class="u-m-t-14 u-f-20 u-lh-28 color-grew">{{ dealCouponTime(item) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => ({})
			},
			disabled: {
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			dealCouponTime(item) {
				let { startTime: st, endTime: et } = item
				let str = ''
				if (st && et) {
					str = `${ this.dayjs(st).format('YYYY-MM-DD') }~${ this.dayjs(et).format('YYYY-MM-DD') }`
				} else if (st) {
					str = `${ this.dayjs(st).format('YYYY-MM-DD') }~无限制`
				} else if (et) {
					str = `${ this.dayjs(et).format('YYYY-MM-DD') }`
				} else {
					str = '无限制'
				}
				return str
			},
		}
	}
</script>

<style scoped lang="scss">
	.coupon {
		&-card {
			padding: 20rpx;
			
			&-left {
				margin-right: 22rpx;
				width: 198rpx;
				border-right: 2rpx dashed #E3E3E3;
			}
		}
	}
</style>
